<template>
  <a-drawer
    width="50%"
    placement="right"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
    :title="drawerStatus === 'edit' ? '编辑剧集' : drawerStatus === 'add' ? '创建剧集' : '剧集详情'"
    class="form-drawer form-card"
  >
    <a-form-model
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :class="{ 'form-model': drawerStatus !== 'info' }"
    >
      <a-form-model-item label="剧集标题" prop="title">
        <a-input v-model="ruleForm.title" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="剧集副标题" prop="subtitle">
        <a-input v-model="ruleForm.subtitle" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <!-- <a-form-model-item label="价格" prop="price">
        <a-input
          v-model="ruleForm.price"
          type="number"
          placeholder="请输入价格"
          allowClear
        ></a-input>
      </a-form-model-item>
      <a-form-model-item label="会员价格" prop="vprice">
        <a-input
          v-model="ruleForm.vprice"
          type="number"
          placeholder="请输入会员价格"
          allowClear
        ></a-input>
      </a-form-model-item> -->
      <a-form-model-item label="总集数" prop="episodes">
        <a-input
          v-model="ruleForm.episodes"
          placeholder="请输入总集数"
          type="number"
          allowClear
        ></a-input>
      </a-form-model-item>
      <!-- <a-form-model-item label="剧集封面" prop="image">
        <a-textarea v-model="ruleForm.image" placeholder="请输入剧集封面" allowClear></a-textarea>
      </a-form-model-item> -->
      <a-form-model-item label="剧集简介" prop="description">
        <a-textarea v-model="ruleForm.description" placeholder="请输入简介" allowClear></a-textarea>
      </a-form-model-item>
      <a-form-model-item label="分类">
        <a-select style="width: 100%" allowClear v-model="ruleForm.flags">
          <a-select-option :value="item.value" v-for="item in videoLevelMap" :key="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="状态">
        <a-select style="width: 100%" v-model="ruleForm.status" allowClear>
          <a-select-option :value="item.value" v-for="item in videoStatusMap" :key="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- <a-form-model-item label="排序">
        <a-input v-model="ruleForm.weigh" placeholder="请输入排序" type="number"></a-input>
      </a-form-model-item>
      <a-form-model-item label="评分" prop="score">
        <a-input
          v-model="ruleForm.score"
          placeholder="请输入评分"
          allowClear
          type="number"
        ></a-input>
      </a-form-model-item>
      <a-form-model-item label="销量" prop="saleNum">
        <a-input
          v-model="ruleForm.saleNum"
          placeholder="请输入销量"
          allowClear
          type="number"
        ></a-input>
      </a-form-model-item> -->
    </a-form-model>
    <a-form-model-item
      :wrapper-col="{ span: 13, offset: 3 }"
      class="form-footer"
      v-if="drawerStatus !== 'info'"
    >
      <a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
      <a-button @click="onClose">取消</a-button>
    </a-form-model-item>
  </a-drawer>
</template>

<script>
import { shortVideoDetail, shortVideoAddOrUpdate } from '@/api/short'
import { mapState } from 'vuex'
import { videoLevelArr, videoStatus } from '../const'
import { checkMoney } from '@/utils/index'
export default {
  name: 'VideoForm',
  data() {
    return {
      visible: false,
      ruleForm: {
        title: '',
        subtitle: '',
        price: '',
        vprice: '',
        episodes: '',
        image: '',
        description: '',
        flags: undefined,
        status: undefined,
        weigh: '',
        score: '',
        saleNum: ''
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      rules: {
        title: [{ required: true, message: '剧集标题不能为空' }],
        subtitle: [{ required: true, message: '剧集副标题不能为空' }],
        price: [{ required: true, message: '价格不能为空' }, { validator: checkMoney }],
        vprice: [{ required: true, message: '会员价格不能为空' }, { validator: checkMoney }],
        episodes: [{ required: true, message: '总集数不能为空' }],
        image: [{ required: true, message: '剧集封面不能为空' }],
        phone: [
          { required: true, message: '绑定手机号不能为空' },
          { message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }
        ],
        description: [{ required: true, message: '剧集简介不能为空' }]
      },
      allRoleList: [],
      submitLoading: false,
      drawerTitle: '创建剧集',
      drawerStatus: 'add'
    }
  },
  watch: {
    // 'ruleForm.identityType'(newValue, oldValue) {
    //   if (newValue != oldValue) {
    //     this.getAllRoleList()
    //   }
    // }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.info
    }),
    videoLevelArr() {
      return videoLevelArr
    },
    videoLevelMap() {
      const strings = Object.keys(videoLevelArr)
      const arr = []
      strings.forEach((e) => {
        arr.push({
          label: videoLevelArr[e],
          value: e
        })
      })
      return arr
    },
    videoStatusMap() {
      const strings = Object.keys(videoStatus)
      const arr = []
      strings.forEach((e) => {
        arr.push({
          label: videoStatus[e],
          value: e
        })
      })
      return arr
    }
  },
  methods: {
    onChange(e) {
      console.log(e, 'e')
    },
    open(record = {}, status = 'add') {
      this.drawerStatus = status
      if (record.id) {
        this.getInfo(record.id)
      }
      this.visible = true
    },
    afterVisibleChange(val) {
      if (!val) {
        this.ruleForm = {
          title: '',
          subtitle: '',
          price: '',
          vprice: '',
          episodes: '',
          image: '',
          description: '',
          flags: undefined,
          status: undefined,
          weigh: '',
          score: '',
          saleNum: ''
        }
      }else{
        this.$refs.ruleForm.resetFields()
      }
    },
    onClose() {
      this.visible = false
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          shortVideoAddOrUpdate(this.ruleForm)
            .then(() => {
              this.$notification['success']({
                message: '提示',
                description: `${this.ruleForm.id ? '编辑' : '新增'}成功`
              })
              this.onClose()
              this.submitLoading = false
              this.$emit('on-submit')
            })
            .catch(() => {
              this.submitLoading = false
            })
        }
      })
    },
    getInfo(id) {
      shortVideoDetail(id).then((res) => {
        this.ruleForm = res.data
      })
    }
  },
  components: {}
}
</script>

<style></style>
